<template>
  <!-- 维护卡权益按钮 -->
  <div>
    <!-- 查询条件新增和保存按钮 -->
    <div>
      <el-form v-for="(ruleForm) in ruleForm" :key="ruleForm.id" ref="ruleForm"  :model="ruleForm" size="mini"
        :rules="rules" class="orderquery">
        <div style="margin: 20px 0 10px 20px">
          <el-form-item label="权益描述"   prop="texavalue" style="display: flex; margin: 0 30px 20px 0">
            <el-input v-model="ruleForm.texavalue"></el-input>
          </el-form-item>
          <el-form-item label="次数 / 份数" prop="onetime" style="display: flex; margin: 0 30px 0 0">
            <el-input v-model="ruleForm.onetime"></el-input>
          </el-form-item>
          <el-form-item label="特殊状态logo" style="margin: 20px 30px 0 0">
            <el-upload :limit="1" action="/file/fileMapping/uploadAvatarMall" list-type="picture-card"
              :on-success="handleSuccess" :on-preview="handlePreview" :on-remove="handleRemove"
              class="avatar-uploader imgs-img">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="权益归属卡:"  prop="radio" style="display: flex; margin: 20px 30px 0 0">
            <el-radio v-model="ruleForm.radio" label="1">停用</el-radio>
            <el-radio v-model="ruleForm.radio" label="2">正常</el-radio>
          </el-form-item>




          <el-button type="info" @click="chooise" style="margin: 20px 30px 0 0">选择权益</el-button>
          <el-button :disabled="flag" type="danger" @click="delechooise" style="margin: 20px 30px 0 0">删除</el-button>
          <el-button @click="newbutton" size="mini" type="primary" style="width: 100px; height:40px;margin: 20px">新增
          </el-button>

          <el-button @click="submitForm('ruleForm')"  size="mini" type="primary" style="width: 100px; height:40px; margin: 20px">保存
          </el-button>
        </div>

      </el-form>

    </div>



    <!-- ----------------------------我是点中 选择权益才出现的 -->
    <el-dialog title="选择权益" :visible.sync="dialogTableVisible" width="990px">
      <!-- 查询条件加表格 -->
      <el-form v-show="addnew" :model="records" size="mini" class="orderquery">
        <div style="display:flex;margin: 20px 0 10px 20px;align-items: center;">
          <el-form-item label="权益名称" style="display: flex; margin: 0 30px 0 0">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="权益类型" style="display: flex; margin: 0 30px 0 0">
            <el-radio v-model="power" label="1">券</el-radio>
            <el-radio v-model="power" label="2">保险</el-radio>
          </el-form-item>
          <el-button size="mini" type="primary" style="width: 100px; margin: 20px">查询
          </el-button>
          <el-button @click="addnewfn()" size="mini" type="primary" style="width: 100px; margin: 20px">新增
          </el-button>
        </div>
        <el-table :data="tableData" class="account_table" size="small" border :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" style="margin: 40px 0 10px 20px; width: 95%">
          <el-table-column fixed prop="orderId" label="权益编号" align="cneter">
          </el-table-column>
          <el-table-column fixed prop="orderId" label="权益名称"> </el-table-column>
          <el-table-column prop="orderId" label="权益类型"> </el-table-column>
          <el-table-column prop="orderId" label="权益内容"> </el-table-column>
          <el-table-column prop="orderId" label="次数、份数"> </el-table-column>
          <el-table-column prop="orderId" label="操作人"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="280">
            <template slot-scope="">
              <el-button @click="diagedit" type="primary" size="mini">修改</el-button>
              <el-button type="primary" size="mini">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <!-- 点击添加 和修改  -->
      <el-form v-show="!addnew" :model="records" size="mini" class="orderquery">
        <el-form-item label="权益名称" style="display: flex; margin: 0 10px 20px 0">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="权益类型：" style="display: flex;">
          <el-radio v-model="power" label="1">券</el-radio>
          <el-radio v-model="power" label="2">保险</el-radio>
        </el-form-item>
        <el-form-item label="权益内容：" style="display: flex;">
          <el-radio v-model="power" label="2">保险</el-radio>
        </el-form-item>
        <el-form-item label="服务范围：" style="display: flex;">
          <el-radio v-model="power" label="2">保险</el-radio>
          <el-radio v-model="power" label="1">券</el-radio>
        </el-form-item>
        <el-form-item label="次数 、份数：" style="display: flex">
          <el-input placeholder="整数"></el-input>
        </el-form-item>
        <el-form-item label="权益介绍:" style="display: flex; margin: 0 30px 0 0">
          <textarea></textarea>
        </el-form-item>
        <el-form-item label="权益说明:" style="display: flex; margin: 0 30px 0 0">
          <textarea></textarea>
        </el-form-item>
        <el-button @click="savepower" type="primary" style="width: 100px; margin: 20px">保存
        </el-button>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "maintenance",
  data() {
    return {
      flag: true,
      addnew: true, //点击弹框新增按钮 
      dialogTableVisible: false,
      records: null,
      ruleForm: [{ texavalue: "", onetime: "", radio: "1", id: 0 }],
      radio: 1,
      power: 2,
      tableData: [
        { orderId: "111", applyTime: "111", status: "111", bankname: "111" },
      ],
       rules: {
          texavalue: [
            { required: true, message: '请输入权益描述',  trigger: 'blur' }
          ],
          onetime: [
            { required: true, trigger: 'blur',message: '请输入次数和份数', }
          ],
          // radio: [
          //   { required: true, trigger: 'blur',message: '请选择一个', }
          // ],
        }
    }
  },
  methods: {
    // 点击页面上的保存的按钮
    submitForm(ruleForm){
      console.log('验证的规则',ruleForm)
      console.log(this.$refs[ruleForm][0]) //取到的第一个值
     this.$refs[ruleForm][0].validate((valid) => {
       console.log('valid',valid)
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    primary() {

    },// 弹框中保存按钮
    savepower() {
      this.addnew = !this.addnew

       this.$refs[ruleForm].validate((valid) => {
         console.log(valid)
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    // 弹框中新增按钮里 新增页面
    addnewfn() {
      this.addnew = !this.addnew



    },
    // 弹框中修改按钮里  修改页面
    diagedit() {
      this.addnew = !this.addnew
    },
    // 删除权益按钮
    delechooise() {
      // 当点击删除的时候 让循环表单的数组的下标-1 那么就是删除表单一行
      this.ruleForm.length = this.ruleForm.length - 1
      this.flags()
    },
    // 选择权益按钮
    chooise() {
      // alert("diag");
      this.dialogTableVisible = true
    },
    //页面上新增按钮
    newbutton() {
      var arr = { texavalue: "", onetime: "", radio: "" }
      this.ruleForm.push(arr)
      console.log('我是新增的空对象', arr)
      this.flags()
    },
    // 判断数组长度
    flags() {
      if (this.ruleForm.length < 2) {
        // 如果你是2个以内了 那么 你还是禁用的
        this.flag = true
      } else {
        // 如果你大于3个 那么你可以删除
        //先赋值为true再赋为false, 不然会没反应
        this.flag = true
        this.flag = false
      }
    },



    handleSuccess(file, filelist) {
      console.log(file[0], filelist);
      this.imgmore = file[0]; //将成功之后的文件路径给imgmore 显示出来
    },
    handlePreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      // document.
    },
    handleRemove() {
      console.log(file, filelist);
    },
  },
};
</script>

<style>
</style>